<template>
  <view class="containerBox" :style="[outModuleCss]">
    <view :style="[moduleBgCss]" class="module-bg"></view>
    <view class="containerContent">
      <view class="title" v-if="propsData.params.useTitle == 1">
        <moduleHeader
          :propsData="propsData"
          :moduleName="moduleName"
          :showMore="false"
        ></moduleHeader>
      </view>
      <view class="container" id="container">
        <view
          class="picBox"
          :style="[
            {
              height: height(propsData.params.cubeBoxHeight) * boxWidth + 'px',
              width: boxWidth + 'px'
            }
          ]"
        >
          <button
            class="pic"
            v-for="(item, index) in propsData.params.cubeCoverList"
            :key="index"
            @click="toUrl(item)"
            :open-type="getOpenType(item)"
            :style="[
              {
                top: height(item.css.top) * boxWidth + 'px',
                left: item.css.left,
                width: item.css.width,
                height: height(item.css.height) * boxWidth + 'px',
                padding: propsData.params.margin * 2 + 'rpx'
              }
            ]"
          >
            <image lazy-load :src="item.picUrl" alt="" />
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { diyMixin } from "../mixins/diy";
import moduleHeader from "../components/moduleHeader/index.vue";
export default {
  props: {
    propsData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      isMounted: false,
      boxWidth: 0
    };
  },
  components: {
    moduleHeader
  },
  mixins: [diyMixin],
  computed: {
    moduleName() {
      return this.propsData.params.text;
    },
    height() {
      return (height) => {
        if (height && height != "" && height != 0) {
          height = height.replace("%", "");
          height = (height - 0) / 100;
          return height;
        } else {
          return 0;
        }
      };
    },
    getOpenType() {
      return (item) => {
        try {
          return item.link.open_type == "contact" ? "contact" : "";
        } catch (error) {
          return "";
        }
        //
      };
    }
  },
  mounted() {
    this.$nextTick(() => {
      let query = uni.createSelectorQuery().in(this);
      query
        .select(".container")
        .boundingClientRect((data) => {
          if (data) this.boxWidth = data.width;
        })
        .exec();
    });
  },
  methods: {
    toUrl(e) {
      this.$utils.diySkip(e.link);
    }
  }
};
</script>

<style lang="scss" scoped>
.containerBox {
  width: 100%;
  position: relative;
}
.containerContent {
  .container {
    width: 100%;
    .picBox {
      position: relative;
      .pic {
        position: absolute;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .title {
    padding: 24rpx;
  }
}
.module-bg {
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
}

button {
  border-radius: 0;
}
</style>
